<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>

    <title>欢迎来到Alone在线购书商城</title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta charset="utf-8">
    <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商城首页</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="../../css/bootstrap.css" rel="stylesheet">

    <!-- 引入jQuery核心js文件 -->
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="../../js/bootstrap.min.js"></script>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>

    <script type="text/javascript">
        function reinitIframe() {
            var iframe = document.getElementById("_content");
            try {
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.height = height;
            } catch (ex) {
            }
        }

        window.setInterval("reinitIframe()", 200);
    </script>

</head>

<body>
<!--默认的模态框-->
<div class="modal fade" id="model_window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">登陆页面</h4>
            </div>
            <div class="modal-body" style="overflow:scroll;">
                <iframe id="_content" scrolling="auto" name="_content" width="100%" height="100%"
                        frameborder="0">
                </iframe>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!--大号模态框-->
<div   class="modal fade" id="model_window2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div  class="modal-dialog">
        <div  class="modal-content" style="width:900px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">注册页面</h4>
            </div>
            <div class="modal-body" style="overflow:scroll;height:500px;">
                <iframe  id="_content2" scrolling="auto" name="_content2" width="100%" height="100%"
                        frameborder="0">
                </iframe>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div   class="modal fade" id="model_window3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div  class="modal-dialog">
        <div  class="modal-content" style="width:900px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">图书显示页面</h4>
            </div>
            <div class="modal-body" style="overflow:scroll;height:500px;">
                <iframe  id="_content3" scrolling="auto" name="_content3" width="100%" height="100%"
                         frameborder="0">
                </iframe>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<%--引入通用的头部页面--%>

<%@include file="/jsp/front/common/header.jsp" %>
<!--导航栏-->
<div class="container" style="margin-top: 10px;">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="${pageContext.request.contextPath}/index_showIndex.action">首页</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a id="types" onclick="books();"
                           href="#">全部图书<span class="sr-only">(current)</span></a>
                    </li>
                    <c:forEach items="${requestScope.types}" var="type">
                        <li role="separator" class="divider">
                        <a id="single" onclick="book('${type.id}');"
                           href="#">${type.name}<span class="sr-only">(current)</span></a>
                        </li>
                    </c:forEach>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">所有分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <c:forEach items="${requestScope.types}" var="type">
                                <li>
                                    <a id="type" onclick="book('${type.id}');"
                                       href="#">${type.name}<span class="sr-only">(current)</span>
                                    </a>
                                </li>
                                <li role="separator" class="divider"></li>
                            </c:forEach>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/search_query.action" method="post">
                    <div class="form-group">
                        <input id="bookName" name="bookName" type="text" class="form-control" placeholder="输入图书名字">
                    </div>
                    <button type="submit" class="btn btn-default">查询</button>
                </form>
            </div>

        </div>
    </nav>
</div>

<!--轮播图-->
<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../../imgs/one.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../../imgs/two.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../../imgs/three.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>
</div>

<!--广告图片-->
<div class="container" style="margin-top: 10px;">
    <div class="row">
        <div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;">
            <img src="../../imgs/footer.jpg" style="width: 98%;"/>
        </div>
    </div>
</div>
<!--友情链接和版权信息-->
<div class="container" style="margin-top: 10px;">
    <div class="row">
        <div class="" align="center">
            <ul class="list-inline">
                <li><a href="info.html">关于我们</a></li>
                <li><a>联系我们</a></li>
                <li><a>招贤纳士</a></li>
                <li><a>法律声明</a></li>
                <li><a>友情链接</a></li>
                <li><a>支付方式</a></li>
                <li><a>配送方式</a></li>
                <li><a>服务声明</a></li>
                <li><a>广告声明</a></li>
            </ul>
        </div>
        <div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
            Copyright &copy; 2019 yuanfeng版权所有
        </div>
    </div>
</div>
</div>

</body>

<script type="text/javascript">
    function books() {
        $("#_content3").attr("src", "${pageContext.request.contextPath}/index_queryBooks.action");
        $('#model_window3').modal({show: true});
    }
    function book(typeId) {
        $("#_content3").attr("src", "${pageContext.request.contextPath}/index_queryBooks.action?typeId="+typeId);
        $('#model_window3').modal({show: true});
    }
</script>
</html>
